const urlParams = new URLSearchParams(window.location.search);
const currNo = urlParams.get('currNo');
axios.get(`/api/curriculum/${currNo}`)
    .then(({data: {data: {courseData, choosedNum, tutorStaffUserName}}}) => {
        console.log(courseData)
        console.log(choosedNum)
        console.log(tutorStaffUserName)
        if (choosedNum && tutorStaffUserName && courseData) {
            testUrl(courseData.iconPath)
            courseRender(navCenterStr, "nav .navbar-nav", courseData.iconPath, choosedNum, tutorStaffUserName,courseData.name)
            const taskGroups = courseData.taskGroups
            let tabListStr = ''
            let navTabContent = ''
            for (const courseDataKey in taskGroups) {
                console.log(taskGroups[courseDataKey])
                testUrl(taskGroups[courseDataKey].iconPath)
                tabListStr += `
                    <a class="nav-link  rmy-1 disabled" role="tab">
                        <img src="${taskGroups[courseDataKey].iconPath}" alt="Logo" width="25" height="25"
                             class="d-inline-block align-text-top">${taskGroups[courseDataKey].name}</a>
                `
                for (const courseDataKeyKey in taskGroups[courseDataKey].tasks) {
                    console.log(taskGroups[courseDataKey].tasks[courseDataKeyKey])
                    testUrl(taskGroups[courseDataKey].tasks[courseDataKeyKey].iconPath)
                    tabListStr += ` 
                        <a class="nav-link ms-3   my-1  list-group-item-action" id="list-${courseDataKeyKey}-list" data-bs-toggle="list"
                        href="#list-${courseDataKeyKey}" role="tab" aria-controls="list-${courseDataKeyKey}">
                        <img src="${taskGroups[courseDataKey].tasks[courseDataKeyKey].iconPath}" alt="Logo" width="25" height="25"
                             class="d-inline-block align-text-top">${taskGroups[courseDataKey].tasks[courseDataKeyKey].name}</a>
                    `
                    navTabContent += `
                    <div class="tab-pane fade list-group h-100" id="list-${courseDataKeyKey}" role="tabpanel"
                         aria-labelledby="list-${courseDataKeyKey}-list">
                        <li class="list-group-item  align-items-center">
                            <div class="d-flex w-100 justify-content-between">
                            <p class="mb-1">${taskGroups[courseDataKey].tasks[courseDataKeyKey].goal}</p>
<!--                                <small class="text-muted">time</small>-->
                            </div>
                            <small class="text-muted">${taskGroups[courseDataKey].tasks[courseDataKeyKey].description}</small>`
                    for (const courseDataKeyKeyKey in taskGroups[courseDataKey].tasks[courseDataKeyKey].guidelines) {
                        navTabContent += `<h5 class="mb-1">${taskGroups[courseDataKey].tasks[courseDataKeyKey].guidelines[courseDataKeyKeyKey].description}</h5>`
                    }
                    navTabContent += `
                        </li>
                    </div>
                    `
                }
                document.querySelector('section #list-tab[role="tablist"] ').innerHTML = tabListStr
                document.querySelector('section #nav-tabContent').innerHTML = navTabContent
            }
            console.log(tabListStr)
        }
    })
    .catch(function (error) {
        if (error.response) {
            // 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围
            console.log('// 请求成功发出且服务器也响应了状态码，但状态代码超出了 2xx 的范围')
            console.log(error.response.data);
            console.log(error.response.status);
            console.log(error.response.headers);
        } else if (error.request) {
            // 请求已经成功发起，但没有收到响应
            // `error.request` 在浏览器中是 XMLHttpRequest 的实例，
            console.log('请求已经成功发起，但没有收到响应', error.request);
        } else {
            // 发送请求时出了点问题
            console.log('Error发送请求时出了点问题', error.message);
        }
        console.log(error.config);
    });

function navCenterStr(iconPath, choosedNum, tutorStaffUserName,description) {
    return `
        <li class="navbar-brand">
           <img src="${iconPath}" alt="Logo" width="30" height="30"class="d-inline-block align-text-top" style="border-radius: 50%">
              ${description}<span class="fs-6">(${choosedNum})</span>
        </li>
        <li class="nav-item">
           <a class="nav-link active" aria-current="page" href="#">
              ${tutorStaffUserName}<span class="badge text-bg-warning">教师</spa
            </a>
        </li>
`
}

function courseRender(fn, faterbox, value1, value2, value3,value4) {
    let str = fn(value1, value2, value3,value4);
    document.querySelector(faterbox).innerHTML = str
}

document.querySelector('[data-name=top]').addEventListener('click', () => {
    window.scrollTo({top: 0, behavior: 'smooth'});
})
function testUrl(url){
    if (url === '') {url = "./img/imgError.png";}
    //防止路径不全
    else if (url.indexOf('http') === -1 && url.indexOf('./img') === -1) {url = "https://codelover.club" + url;}
    console.log('url',url)
}
